	<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>客户列表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
	<style>
		.dynamicShow{
			margin: 20px 40px;
		}
	</style>
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote news_search">
		<form class="layui-form">
			<div class="layui-inline dynamicShow1">
				<label class="layui-form-label">门店</label>
				<div class="layui-input-block">
					<select name="merchantId" id="merchantId">
						<option value="">--请选择门店--</option>
					</select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">客户类型</label>
				<div class="layui-input-block">
					<select name="type" id="type">
						<option value="">--请选择类型--</option>
						<option value="1">普通客户</option>
						<option value="2">VIP客户</option>
					</select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" name="name" placeholder="请输入姓名">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">手机号码</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" name="phone" placeholder="请输入手机号码">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">车牌号码</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" name="plateNumber" placeholder="请输入车牌号码">
				</div>
			</div>
			<br>
			<div class="layui-inline" style="margin:20px 0 0 0px;">
				<label class="layui-form-label">消费范围</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="minConsumeMoney" placeholder="￥" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid">-</div>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="maxConsumeMoney" placeholder="￥" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-inline" style="margin:20px 0 0 40px;">
				<a class="layui-btn search_btn" lay-submit="" lay-filter="queryCustomer" style="background: #fff;color:#5785db;border:1px solid #5785db;">查询</a>
			</div>

			<div class="layui-inline dynamicShow " style="margin:20px 0 0 20px;">
			   <a class="layui-btn layui-btn-normal membersAdd_btn" style="background: #fff;color:#5785db;border:1px solid #5785db;">添加客户</a>
			</div>
			<div class="layui-inline dynamicShow" style="margin:20px 0 0 20px;">
				<button type="button" class="layui-btn" id="test1">
				<i class="layui-icon">&#xe67c;</i>批量上传
				</button>
			</div>
			 <div class="layui-inline dynamicShow" style="margin:20px 0 0 20px;">
					 <a class="layui-btn layui-btn-normal" href="/storeMember/template/down" style="background:#5785db;">下载模板文件</a>
			</div>
    </form>
		
	</blockquote>
	<div class="layui-form news_list">
		<table class="layui-table" id="memberList" lay-filter="members"></table>
	</div>
	<div id="page"></div>
	<script src="https://cuikangjie.github.io/JsonExportExcel/dist/JsonExportExcel.min.js"></script>
	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="plugins/layui/layui.all.js"></script>
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="iconfont icon-edit"></i>编辑</a>
 		<a class="layui-btn layui-btn-xs" lay-event="sendGift"><i class="layui-icon">&#xe609;</i>发礼包</a>
	</script>
	<script type="text/html" id="barDemo2">
			<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="iconfont icon-edit"></i>编辑</a>
	</script>
	<script id="switchTpl" type="text/html">
		<input type="checkbox"  name = "ifKey"   value = {{d.id}} lay-skin="switch" lay-text="VIP|普通" lay-filter="ifKeyDemo" {{ d.type == '2' ? 'checked' : '' }}>
	</script>
	<script type="text/javascript">
        $("#download").click(function () {
            var option={};
            option.fileName = 'excel'
            option.datas=[
                {
                    sheetData:[
                        {name:'林**',phone:'15088******',carnum:'粤A1****',carinfo:'本田思域220T',type:'2'},
                        {name:'李**',phone:'13088******',carnum:'粤B1****',carinfo:'阿斯顿马丁',type:'1'}
					],
                    sheetName:'sheet',
                    sheetFilter:['name','phone','carnum','carinfo','type'],
                    sheetHeader:['客户姓名','手机号码','车牌号','车辆信息','客户类型(备注：1为普通客户，2为VIP客户)']
                }
            ];
            var toExcel=new ExportJsonExcel(option);
            toExcel.saveExcel();
        })

	</script>
	<script type="text/javascript">


	layui.config({
		base : '/js/admin/'
	}).extend({
		ajaxExtention : 'ajaxExtention',
		$tool : 'tool'
	}).use(['table','form','upload','$tool'], function(){
	    var table = layui.table,
			form = layui.form,
			upload = layui.upload,
			$tool = layui.$tool;
        $.ajax({
            type : "GET",
            url: '/merchants/merchants.json',
            dataType:'json',
            async:false,
            success: function(data){
                var list=data.data;
                var html='';
                for(var i=0;i<list.length;i++){
                    html += "<option value='"+list[i].id+"'>"+list[i].name+"</option>"
                }
                $("#merchantId").append(html);
                form.render();
            }
        });

        var isAdminstr=localStorage.getItem("isAdmin");
        var isAdmin=isAdminstr=='true'?true:false;
        var tableIns;
        if(isAdmin){
            $(".dynamicShow").hide();
            $(".dynamicShow1").show();
            tableIns =table.render({
                elem: '#memberList'
                ,url: '/storeMember'
                ,cols: [[
                     {field:'merchantName', title: '所属门店',  sort: true,width:"10%"}
//                    ,{field:'merchantName', title:'所属门店'}
                    ,{field:'type', title: '客户类型',templet:function(d){
                        if(d.type==1){
                            return '普通客户'
                        }else if(d.type==2){
                            return 'VIP客户'
                        }
                    }
                    }
                    ,{field:'name', title: '客户姓名',templet:function(d){
                        if(d.name=='' ||d.name==null){
                            return d.nickname;
                        }else {
                            return d.name;
                        }
                    }}
                    ,{field:'phone', title: '手机号码'}
                    ,{field:'plateNumbers', title: '车牌号码'}
                    ,{field:'carDescs', title: '车辆信息'}
                    ,{field:'frameNumbers', title: '车架号'}
                    ,{field:'consumeMoney', title: '消费金额'}
                    ,{field:'createTime', title: '创建时间',
                        templet:function(d){
                            if(d.createTime!=null){
                                return $tool.formatTime(d.createTime);
                            }else{
                                return "---"
                            }
                        }}
                    ,{title: '操作', align:'center', toolbar: '#barDemo2'} //这里的toolbar值是模板元素的选择器
                ]]
                ,id: 'testReload'
                ,page: true
            });
        }else {
            $(".dynamicShow").show();
            $(".dynamicShow1").hide();
            tableIns=table.render({
                elem: '#memberList'
                ,url: '/storeMember'
                ,cols: [[
                    {field:'type', title: '客户类型',templet:"#switchTpl"
                    }
                    ,{field:'name', title: '客户姓名',templet:function(d){
                        if(d.name=='' ||d.name==null){
                            return d.nickname;
                        }else {
                            return d.name;
                        }
                    }}
                    ,{field:'phone', title: '手机号码'}
                    ,{field:'plateNumbers', title: '车牌号码'}
                    ,{field:'carDescs', title: '车辆信息'}
                    ,{field:'frameNumbers', title: '车架号'}
                    ,{field:'consumeMoney', title: '消费金额'}
                    ,{field:'createTime',title: '创建时间',
                        templet:function(d){
                            if(d.createTime!=null){
                                return $tool.formatTime(d.createTime);
                            }else{
                                return "---"
                            }
                        }}
                    ,{title: '操作', align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                ]]
                ,id: 'testReload'
                ,page: true
            });
        }


        form.on('switch(ifKeyDemo)', function(obj){
            // 获取当前控件
            var selectIfKey=obj.othis;
            // 获取当前所在行
            var parentTr = selectIfKey.parents("tr");
            // 获取当前所在行的索引
            var parentTrIndex = parentTr.attr("data-index");
            console.log(parentTrIndex);
            var url='/storeMember/changeType';
            var memberId=this.value;
            var status=this.checked ? '1' : '0';
            $.ajax({
                type: "POST",
                url:url,
                data:{id:memberId,status:status},// 序列化表单值
                success: function(data) {
                    if(data.code==2000){
                       layer.msg("修改成功");
                    }else{
                       layer.msg("修改失败");
                    }
                } ,
                error: function(request) {
                    alert("请求错误");
                }
            });
        });
	    var uploadInst = upload.render({
		    elem: '#test1'
		    ,url: '/storeMember/upload'
		    ,accept:'file'
		    ,exts:'xls|xlsx'
		    ,done: function(res){
                layer.msg(res.msg);
				if(res.code==2000){
                    tableIns.reload();
				}
		    }
		    ,error: function(){
		      //请求异常回调
		       layer.msg('上传失败')
		    }
  		});
	    
	    
	    form.on("submit(queryCustomer)", function (data) {
	        var name = data.field.name;
	        var phone = data.field.phone;
	        var type= data.field.type;
            var plateNumber = data.field.plateNumber;
	        var merchantId=data.field.merchantId;
	        var minConsumeMoney=data.field.minConsumeMoney;
            var maxConsumeMoney=data.field.maxConsumeMoney;
            if((minConsumeMoney!='' &&maxConsumeMoney=='') || (minConsumeMoney=='' &&maxConsumeMoney!='')  ){
                layer.msg('请填写正确的消费金额范围');
                return;
			}else{
                var reg = new RegExp("^[0-9]*$");
              	var flag= reg.test(minConsumeMoney);
                var flag2= reg.test(maxConsumeMoney);
                if(!(flag && flag2)){
                    layer.msg('请填写正确的消费金额范围');
                    return;
				}
			}
	        //表格重新加载
	        tableIns.reload({
	            where:{
	                type:type,
                    name:name,
                    phone:phone,
                    plateNumber:plateNumber,
					merchantId:merchantId,
                    minConsumeMoney:minConsumeMoney,
                    maxConsumeMoney:maxConsumeMoney
	            }
	        });

	        return false;
	    });
	    
	    table.on('tool(members)', function(obj){
	    	  var layEvent = obj.event;
			  var ids=obj.data.id;
	    	  if(layEvent === 'del'){ //删除
				  layer.confirm('真的删除该会员吗', function(index){
	    	      layer.close(index);

	    	      $.ajax({
	    	            type: "DELETE",
	    	            url:"/storeMember/"+ids,
	    	            success: function(res) {
	    	            	if(res.code==2000){
	    	            		top.layer.close(index);
	    	          			top.layer.msg("删除成功");
                                obj.del();
	    	            	}else{
                                top.layer.msg("删除失败");
							}
	    	            } ,
	    		 		 error: function(res) {
                             layer.msg("请求错误");
	    		         } 
	    	        }); 
	    	    });
	    	  } else if(layEvent === 'edit'){ //编辑
	    	     editMember(ids);
	    	  }else if(layEvent === 'sendGift'){
	    	      sendGift(ids);
	    	  }
	    	});

			$(".membersAdd_btn").click(function(){
				var index = layui.layer.open({
					title : "添加会员",
					type : 2,
					area:["100%","100%"],
					content : "member/membersAdd.html"
				})

			});

			var categoryList;
			$.ajax({
				type : "GET",
				url: 'categorys/getAlls',
				dataType:'json', async:false,
				success: function(data){
					var list=data.data;
					categoryList=list;
					var html='';
					for(var i=0;i<list.length;i++){
						html += "<option value='"+list[i].id+"'>"+list[i].name+"</option>"
					}
					$("select[name='categoryId']").append(html);
					form.render();
				}
			});

			function sendGift(id){
				var index = layui.layer.open({
					title: "发礼包",
					type: 2,
					content : "/card/card_detail.html?id="+id
				});
				$(window).resize(function () {
					layui.layer.full(index);
				});
				layui.layer.full(index);
			}

			function editMember(id){
				var index = layui.layer.open({
					title: "编辑会员",
					type: 2,
					content: "member/membersEdit.html?id="+id
				});
				$(window).resize(function () {
					layui.layer.full(index);
				});
				layui.layer.full(index);
			}
    });
	</script> 
</body>
</html>